<template>
	<div ref="dom" class="charts chart-gauge"></div>
</template>

<script>
import * as echarts from 'echarts'
import tdTheme from './theme.json';
import { on, off } from '@/libs/tools';
// echarts.registerTheme('tdTheme', tdTheme);
export default {
	name: 'ChartGauge',
	props: {
		value: Array,
		text: String,
		subtext: String,
		series: Array,
		clickTag: String,
		xAxisData: Array,
		seriesData: Array,
		grid: Object,
		legend: Object,
		tooltip: Object
	},
	data() {
		return {
			dom: null
		};
	},
	watch: {
		value: {
			deep: true,
			handler(val) {
				this.intChart();
			}
		},
		series: {
			deep: true,
			handler(val) {
				this.intChart();
			}
		}
	},
	methods: {
		resize() {
			this.dom.resize();
		},
		intChart() {
			this.$nextTick(() => {
				var option = {
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c}'
					},
					series: [
						{
							name: this.title,
							type: 'gauge',
							data: this.value,
							radius: '100%',
							center: ['50%', '50%'],
							min: 0,
							max: 1500,
							splitNumber: 4,
							axisLine: {
								// 坐标轴线
								lineStyle: {
									// 属性lineStyle控制线条样式
									width: 10,
									color: [
										[0.2, '#5382FE'],
										[0.8, '#65E1A5'],
										[1, '#FFC75C']
									]
								}
							},
							axisTick: {
								// 坐标轴小标记
								length: 13, // 属性length控制线长
								lineStyle: {
									// 属性lineStyle控制线条样式
									color: 'auto'
								}
							},
							splitLine: {
								// 分隔线
								length: 18, // 属性length控制线长
								lineStyle: {
									// 属性lineStyle（详见lineStyle）控制线条样式
									color: 'auto'
								}
							},
							axisLabel: {
								color: '#666'
							},
							detail: {
								formatter: '{value}',
								fontSize: 20,
								offsetCenter: [0, '85%']
							},
							title: {
								fontSize: 12,
								color: '#999',
								offsetCenter: [0, '55%']
							},
							pointer: {
								width: 3 // 指针大小
							}
						}
					]
				};
				this.dom = echarts.init(this.$refs.dom, 'tdTheme');
				this.dom.setOption(option);
				on(window, 'resize', this.resize);
			});
		}
	},
	mounted() {
		this.intChart();
	},
	beforeDestroy() {
		off(window, 'resize', this.resize);
	}
};
</script>
